<template>
    <div class="tmpl">
        <nav-bar :title="title"></nav-bar>
        <!-- 轮播图  :url="lunboUrl"-->
        <my-swipe margintop="margin-top: 10px;"></my-swipe>
        <div class="news-title">
            <img class="mui-pull-left photo-listliimg" :src="newsDetail.companyImg">
            <div class="mui-media-body">
                <b><span v-text="newsDetail.companyName"></span></b>
                <div class="news-desc">
                    <p>地址：{{newsDetail.companyAdress}}</p>
                    
                    <p><b>电话：{{newsDetail.companyPhone}}</b></p>
                    <p>特色服务：<font color="green">{{newsDetail.companyService}}</font></p>
                    <p style="clear: both;"><b>经营特色：</b>{{newsDetail.companyIntro}}</p>
                </div>
            </div>
        </div>
        <div class="photo-listgoto" v-show="isShowaround">
            <p>
                <b>住宿：</b>
                <span v-text="newsDetail.aroundIntro" class="teseing"></span>
            </p>
            <img class="photo-listliimg_ngg" v-lazy="newsDetail.aroundImg">
        </div>
        <div class="photo-listgoto" v-show="isShowfood">
            <p>
                <b>餐饮：</b>
                <span v-text="newsDetail.foodIntro"></span>
            </p>
            <img class="photo-listliimg_ngg" v-lazy="newsDetail.foodImg">
        </div>
        <div class="photo-listgoto" v-show="isShowpick">
            <p>
                <b>采摘：</b>
                <span v-text="newsDetail.pickIntro"></span>
            </p>
            <img class="photo-listliimg_ngg" v-lazy="newsDetail.pickImg">
        </div>
        <div class="photo-listgoto" v-show="isShowentertainment">
            <p>
                <b>娱乐：</b>
                <span v-text="newsDetail.entertainmentIntro"></span>
            </p>
            <img class="photo-listliimg_ngg" v-lazy="newsDetail.entertainmentImg">
        </div>
        <!-- <div class="news-content" v-html="newsDetail.companyIntro"></div> -->
        <br>
        <br>
        <br>
        <br>
    </div>
</template>
<script>
export default {
    data(){
        return {
            newsDetail:{}, //就是为了象征性的表示其数据类型
            title:'农庄介绍',//标题
            isShowaround:false,
            isShowfood:false,
            isShowpick:false,
            isShowentertainment:false,
        }
    },created(){
        //1:获取路由参数
        let id = this.$route.query.id;
        //2:拼接路由参数成为后台请求的URL
        this.$ajax.get('?tbname=farmintro&where=companyId::' + id)
        .then(res=>{
             //3:响应回来渲染页面
             this.newsDetail = res.data.rows[0]; 
             if(this.newsDetail.aroundIntro){
                this.isShowaround = true;
             }
             if(this.newsDetail.foodIntro){
                this.isShowfood = true;
             }
             if(this.newsDetail.pickIntro){
                this.isShowpick = true;
             }
             if(this.newsDetail.entertainmentIntro){
                this.isShowentertainment = true;
             }
             //数组，就一个数据，所以直接取[0]
             // console.log(this.newsDetail);
             this.$ajax.get('index/save?tbname=farmintro&views=1&where=companyId::' + id)
                .then(resn=>{
                })
                .catch(errn=>{
                    console.log(errn);
                });
        })
        .catch(err=>{
            console.log(err);
        })
       
    }
}

</script>
<style scoped>
.news-title p {
    color: #0a87f8;
    font-size: 20px;
    /*font-weight: bold;*/
}

.news-title span {
    margin-right: 30px;
}

.news-title {
    margin-top: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);/*-bottom*/
    padding:3px;
}


/*主体文章的左右距离*/

.news-content {
    padding: 10 5;
}

.news-title img {
    margin-right:10px; margin-bottom: 10px;
}
.mui-media-body span {
    font-size: 14px;
}
.mui-media-body p {
    color: #0bb0f5;font-size: 12px;margin:0;
}
.news-desc a , .mui-media-body p {
    color: black;
}

.photo-listliimg_ngg {
    width: 100%;
    vertical-align: top;
}
.photo-listgoto p {
    margin-bottom: 0px;padding:10px; margin-top: 10px;font-size: 13px;color: black;
}
.news-title , .photo-listgoto {
    line-height: 18px;
}
</style>
